<!--
 * @Author: your name
 * @Date: 2020-11-27 15:42:35
 * @LastEditTime: 2020-11-27 17:33:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /demo/dataStruct/src/test/sigleLinkList.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #window {
        font-size: 30px;
        width: 300px;
        height: 80px;
        overflow: hidden;
        padding: 0;
        margin: 0;

    }

    #ul {
        font-size: 30px;
        width: 1800px;
        height: 80px;
        overflow: hidden;
        padding: 0;
        margin: 0;

        /* display: flex;
        flex: 1; */

        /* justify-content: space-between; */
    }

 li {
        float: left;
        line-height: 80px;
        margin: 0;

        transition: transform .3s;
        transform: translateX(300px);
        list-style: none;
        text-align: center;
        background-color: #f00;
        width: 300px;
        height: 80px;
        display: block;
    }
    .show{
       
    }
</style>

<body>
    <div id="window">
        <ul id="ul">

        </ul>

    </div>
</body>
<script src="../js/sigleLinkList.js"></script>

<script>
    //views
    const ul = document.getElementById('ul')
    render(swipperList.getFront())
    function render(model) {
        let oldLi = ul.getElementsByTagName('li')[0]
        if (oldLi) {
            oldLi.style.transform = 'translateX(-' + 300 + 'px)'
            setTimeout(() => {
            ul.removeChild(oldLi)
        }, .3);
        }
        let newLi = createDom('li', model)
        
        ul.append(newLi)
        // newLi.className = 'show'


    }

    function createDom(tag, content) {
        var tag = document.createElement(tag)
        tag.innerText = content
         tag.className = 'show'
        return tag
    }
    //  model

    //  viewmodel



    const timer = setInterval(() => {

        swipperList.headForward()
        render(swipperList.getFront())






    }, 1500)

</script>

</html>